<template>
    <div class="select_goods_box">
        <!-- 商品选择 -->
        <el-dialog title="选择商品" width="980px" :visible.sync="dialogGoodsVisible" :close-on-click-modal="false" :before-close="close">
            <el-form :inline="true" @keyup.enter.native="onSearch" :model="goodsForm" class="select_goods_search">
                <el-form-item label="商品编号">
                    <el-input v-model.trim="goodsForm.code" placeholder=" " ></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model.trim="goodsForm.name" placeholder=" "></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button ref="search" type="small" @click="onSearch">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="selectGoods" :data="goodsData" max-height="700px" highlight-current-row @current-change="handleCurrentTable" v-loading="tableLoading" @row-dblclick="submitGoods">
                <el-table-column label="选择" width="80">
                    <template slot-scope="scope">
                        <div class="cus-p" @click="submitGoods(scope.row)"><i class="el-icon-plus"></i>选择</div>
                    </template>
                </el-table-column>
                <el-table-column v-for="(item, index) in tableHeaderData" :key="index" 
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
                    <template slot-scope="scope">
                        <template v-if="item.prop === 'source'">
                            <div v-if="scope.row[item.prop] == null">基础库</div>
                            <div v-else>历史库<b style="color:green" v-if="scope.row['platformMainbodyId'] !== undefined && scope.row['platformMainbodyId'] === mid">[私]</b></div>
                        </template>
                        <template v-else-if="item.prop === 'code'">
                            <div class="cus-p text-udl">{{scope.row[item.prop]}}<b style="color:red" v-if="scope.row['isInvalid'] === 1"> [已过期]</b></div>
                        </template>
                        <template v-else-if="item.prop === 'name'">
                            <div class="cus-p text-udl">{{scope.row[item.prop]}}<b style="color:red" v-if="scope.row['isInvalid'] === 1"> [已过期]</b></div>
                        </template>
                        <template v-else-if="item.prop === 'specs'">{{scope.row['specs'] === undefined ? scope.row.applyStand : scope.row.specs}}</template>
                        <template v-else-if="item.prop === 'dealUnit'">
                            <div v-if="scope.row['dealUnit'] != undefined">{{scope.row['dealUnit'].name}}</div>
                            <div v-if="scope.row['unitOne'] != undefined">{{scope.row['unitOne'].name}}</div>
                        </template>
                        <template v-else-if="item.prop === 'legalUnit'">
                            <div v-if="scope.row['legalUnit'] != undefined">{{scope.row['legalUnit'].name}}</div>
                            <div v-if="scope.row['unitOne'] != undefined">{{scope.row['unitOne'].name}}</div>
                        </template>
                        <template v-else-if="item.prop === 'twoUnit'">
                            <div v-if="scope.row['twoUnit'] != undefined">{{scope.row['twoUnit'].name}}</div>
                            <div v-if="scope.row['unitTwo'] != undefined">{{scope.row['unitTwo'].name}}</div>
                        </template>
                        <template v-else>
                            {{scope.row[item.prop]}}
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="goodsForm.page"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="goodsForm.limit"
                layout="total, prev, pager, next, sizes, jumper"
                :total="totalCont">
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import { searchGoods } from '@/axios/api';

export default {
    name: 'editTable',
    data() {
        return {
            goodsForm: {
                code: '',
                name: '',
                limit: 20,
                page: 1
            },
            totalCont: 12,
            tableHeaderData: [
                { label: '来源', prop: 'source', width: '100' },
                { label: '0退', prop: 'zeroReturnTxt', width: '60' },
                { label: '海关编码', prop: 'code', width: '110' },
                { label: '商品名称', prop: 'name', width: '140' },
                { label: '申报要素', prop: 'specs', width: '' },
                { label: '成交单位', prop: 'dealUnit', width: '80' },
                { label: '法1单位', prop: 'legalUnit', width: '80' },
                { label: '法2单位', prop: 'twoUnit', width: '80' }
            ],
            goodsData: [
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 },
                { dealUnit: '123', platformMainbodyId: '', specs: '00', name: '商品名称', code: '海关编码', zeroReturnTxt: '0退', id: 1 }
            ],
            mid: '',
            tableLoading: false,
            currentRow: null,
            currentRowIndex: 0
        }
    },
    props: {
        // 弹窗显示隐藏
        dialogGoodsVisible: {
            type: Boolean,
            default() {
                return false 
            }
        },
        // 商品选择参数
        goodsParams: {
            type: Object,
            default() {
                return {} 
            }
        },
        closeGoods: {
            type: Function
        }
    },
    watch: {
        dialogGoodsVisible: {
            immediate: true,
            handler (v, o) {
                let self = this
                if (v) {
                    this.init()
                    setTimeout(() => {
                        this.$nextTick(() => {
                            $('body').off('keyup', null)
                            $('body').on('keyup', (e) => {
                                self.keyUp(e, self)
                            })
                        })
                    }, 1000);
                }
            }
        }
    },
    created() {},
    mounted() {
        let self = this
    },
    destroyed() {
        $('body').off('keyup', null)
    },
    methods: {
        onSearch() {
            this.goodsForm.page = 1
            this.goodsForm.limit = 20
            this.getTableList()
        },
        getTableList() {
            let jsonData = {
                makeType: 1,
                code: this.goodsForm.code,
                name: this.goodsForm.name,
                page: this.goodsForm.page,
                limit: this.goodsForm.limit
            }
            this.tableLoading = true
            searchGoods(jsonData).then(res => {
                if (res.code === 0) {
                    this.goodsData = res.data
                    this.totalCont = res.count
                }
                this.tableLoading = false
                this.$nextTick(() => {
                    this.currentRowIndex = 0
                    this.$refs.selectGoods.setCurrentRow(this.goodsData[0]);
                })
            })
        },
        init() {
            if (Number(this.goodsParams.code)) {
                this.goodsForm.code = this.goodsParams.code
                this.goodsForm.name = ''
            } else {
                this.goodsForm.name = this.goodsParams.code
                this.goodsForm.code = ''
            }
            this.goodsForm.limit = 20
            this.goodsForm.page = 1
            this.getTableList()
        },
        keyUp(e, self) {
            if(!this.$refs.selectGoods) {
                return
            }
            if (e.keyCode === 40 && self.currentRowIndex !== self.goodsData.length) {
                self.currentRowIndex++
            } else if (e.keyCode === 38 && self.currentRowIndex !== 0) {
                self.currentRowIndex--
            } else if (e.keyCode === 13) {
                this.submitGoods(self.goodsData[self.currentRowIndex])
                return
            }
            self.$refs.selectGoods.setCurrentRow(self.goodsData[self.currentRowIndex]);
        },
        handleSizeChange(val) {
            this.goodsForm.page = 1
            this.goodsForm.limit = val
            this.getTableList()
        },
        handleCurrentChange(val) {
            this.goodsForm.page = val
            this.getTableList()
        },
        submitGoods(row) {
            if(row['isInvalid'] == 1) {
                this.$message({
                    message: '该商品已过期!',
                    type: 'warning'
                });
                return
            }
            this.$nextTick(() => {
                let rowData = JSON.parse(JSON.stringify(row))
                this.closeGoods(rowData)
            })
        },
        close() {
            this.closeGoods()
        },
        handleCurrentTable(val) {
            if (!val) {
                return
            }
            this.goodsData.forEach((item,index) => {
                if (item.id === val.id) {
                    this.currentRowIndex = index
                }
            })
            this.currentRow = val;
        }
    }
}
</script>

<style lang="scss">
@import "./index.scss";
</style>

